<template>
  <view class="wrapper">
    <view :class="{ 'bg-f6': isOpen && orderIndex !== 0 }"></view>
    <view class="order" :class="{ 'border-3': !isOpen }">
      <u-collapse-item class="collapse" @change="collapseChange">
        <template slot="title" class="title flex">
          <view
            class="flex-1 order-id"
            :class="isOpen ? 'color-333' : 'color-FBB000'"
            >{{ info.orderNotify }}</view
          >
          <view class="color-999 order-number"
            >共{{ info.productCount }}件, {{ serviceCount }}项服务</view
          >
          <view class="color-EB5C02 order-price"
            >￥{{ info.orderAllMoney }}</view
          >
        </template>
        <view v-if="info.serviceProducts">
          <view
            class="goods"
            v-for="(item, index) in info.serviceProducts"
            :key="index"
          >
            <view class="color-000">{{ item.typeName }}</view>
            <view
              class="goods-item flex"
              v-for="(item1, index1) in item.products"
              :key="index1"
            >
              <image
                v-if="item1.productImg"
                class="img"
                :src="item1.productImg"
                mode="aspectFit"
              ></image>
              <i-icon
                v-else
                class="defalut-img"
                icon="iconzanwutupian_1"
                type="single"
                size="140rpx"
                color="#999"
              ></i-icon>
              <view class="flex flex-dir-c flex-jc-sb">
                <view class="item-name">{{ item1.productName }}</view>
                <view class="flex">
                  <view class="flex flex-1">
                    <!-- <view class="tag">全合成</view>
                    <view class="tag">全合成</view> -->
                  </view>
                  <view class="pad-r-2 color-333"
                    >￥{{ item1.productPrice }}</view
                  >
                  <view class="color-999">x{{ item1.productCount }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="goods">
          <view class="color-000">小保养：</view>
          <view class="goods-item flex">
            <image
              class="img"
              src="https://files.yzsheng.com/goodimg/brandimg/9.png"
              mode="aspectFit"
            ></image>
            <view class="flex flex-dir-c flex-jc-sb">
              <view class="item-name"
                >美孚/Mobil 美孚1号全合成机油 0W-40 SN级（4L装）</view
              >
              <view class="flex">
                <view class="flex flex-1">
                  <view class="tag">全合成</view>
                  <view class="tag">全合成</view>
                </view>
                <view class="pad-r-2 color-333">￥399</view>
                <view class="color-999">x1</view>
              </view>
            </view>
          </view>
          <view class="goods-item flex">
            <image
              class="img"
              src="https://files.yzsheng.com/goodimg/brandimg/9.png"
              mode="aspectFit"
            ></image>
            <view class="flex flex-dir-c flex-jc-sb">
              <view class="item-name"
                >美孚/Mobil 美孚1号全合成机油 0W-40 SN级（4L装）</view
              >
              <view class="flex">
                <view class="flex flex-1">
                  <view class="tag">全合成</view>
                  <view class="tag">全合成</view>
                </view>
                <view class="pad-r-2 color-333">￥399</view>
                <view class="color-999">x1</view>
              </view>
            </view>
          </view>
        </view> -->
        <view v-if="info.servicePrice">
          <view
            class="line flex flex-ai-c"
            v-for="(item, i) in info.servicePrice"
            :key="i"
          >
            <view class="flex-1 color-666">{{ item.productServiceName }}</view>
            <view class="pad-r-2 color-333"
              >￥{{ item.productServicePrice }}</view
            >
            <view class="color-999">x{{ item.prodectServiceCount }}</view>
          </view>
        </view>
        <view v-if="info.coupons">
          <view
            class="line flex flex-ai-c"
            v-for="(item, index) in info.coupons"
            :key="index"
          >
            <i-icon
              icon="iconfapiao"
              type="single"
              size="38rpx"
              color="#FDD421"
            ></i-icon>
            <view class="discount flex-1 color-333">优惠券</view>
            <view class="pad-r-2 color-666">{{ item.couponName }}</view>
            <view class="color-EB5C02">- ￥{{ item.couponPrice }}</view>
          </view>
        </view>
        <view class="total">
          <text class="color-666"
            >已优惠:
            <text class="color-EB5C02">￥{{ info.couponsAllMoney }}</text>
          </text>
          <text class="pad-l-20 color-666">合计:</text>
          <text class="total-price color-EB5C02"
            >￥{{ info.orderAllMoney }}</text
          >
        </view>
      </u-collapse-item>
      <view :class="{ 'border-eee': isOpen }">
        <view class="item">
          <view class="color-666">派工：</view>
          <view
            class="flex-1"
            :class="
              info.workStatusStr === '已派工' ? 'color-3DB707' : 'color-EB5C02'
            "
            >{{ info.workStatusStr
            }}<text v-if="info.status === 11" class="color-999"
              >(暂停施工)</text
            ></view
          >
          <!-- <view class="color-EB5C02 flex-1">{{info.workStatusStr}}</view> -->
          <radio
            :value="info.orderId"
            :checked="current"
            color="#FDD421"
            style="transform: scale(0.8)"
            @click="changeCurrent"
          />
        </view>
        <view class="item">
          <view class="color-666">备货：</view>
          <view class="color-666">{{ info.readyStatusStr }}</view>
        </view>
        <view class="item">
          <view class="color-666">渠道：</view>
          <view class="color-666">{{ info.sourceStatusStr }}</view>
        </view>
        <view class="item">
          <view class="color-666">服务：</view>
          <view class="color-666">{{ info.serviceStr }}</view>
        </view>
      </view>
    </view>
    <view :class="{ 'bg-f6': isOpen }"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      serviceCount: 0,
    }
  },

  props: {
    info: {
      type: Object,
      default() {
        return {}
      },
    },

    current: {
      typpe: Boolean,
      dafatule: false,
    },

    orderIndex: {
      typpe: Number,
      dafatule: 0,
    },
  },

  mounted() {
    let sum = 0
    if (this.info.servicePrice) {
      this.info.servicePrice.map((item) => {
        sum += item.prodectServiceCount
      })
    }

    this.serviceCount = sum
  },

  methods: {
    //折叠面板点击事件
    collapseChange(e) {
      this.isOpen = e.show
    },

    changeCurrent() {
      this.$emit('selOrder', {
        orderStatus: this.info.status,
        orderId: this.current ? '' : this.info.orderId,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.order {
  padding: 0 20rpx;
  border-radius: 10px;
  margin: 20rpx 24rpx 30rpx;

  .title {
    border-bottom: 2rpx solid #eee;
  }

  .order-id {
    flex-shrink: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .order-number {
    flex-shrink: 0;
  }

  .order-price {
    flex-shrink: 0;
  }

  .item {
    display: flex;
    padding: 20rpx 0;

    .color-3DB707 {
      color: #3db707;
    }
  }

  .color-999,
  .color-333,
  .color-FBB000,
  .color-EB5C02 {
    font-size: 26rpx;
    font-weight: 500;
  }

  .goods {
    //border-bottom: 2rpx solid #eee;

    .color-000 {
      font-size: 32rpx;
      font-weight: bold;
      padding-top: 30rpx;
    }

    .goods-item {
      padding: 20rpx 0;
      border-bottom: 2rpx solid #eee;

      .img {
        height: 140rpx;
        width: 140rpx;
        margin-right: 20rpx;
      }

      .defalut-img {
        margin-right: 20rpx;
      }
      .item-name {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
      }

      .tag {
        height: 38rpx;
        line-height: 38rpx;
        padding: 0 15rpx;
        border-radius: 19rpx;
        border: 2rpx solid #fbb000;
        margin-right: 10rpx;
      }
    }
  }

  .line {
    height: 88rpx;
    border-bottom: 2rpx solid #eee;

    .discount {
      font-weight: bold;
      padding-left: 20rpx;
    }
  }

  .total {
    height: 100rpx;
    line-height: 100rpx;
    text-align: right;

    .pad-l-20 {
      padding-left: 20rpx;
    }

    .total-price {
      font-weight: bold;
      font-size: 34rpx;
    }
  }
}

.pad-r-2 {
  padding-right: 20rpx;
}

.border-3 {
  border: 3rpx solid #fbb000;
  border-radius: 10px;
  //padding: 0 20rpx;
  //margin: 20rpx 0;
}

.border-eee {
  border: 3rpx solid #eee;
  border-radius: 10px;
  padding: 0 20rpx;
}

.bg-f6 {
  background: #f6f6f6;
  height: 20rpx;
}

/deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before {
  color: #000;
}

/deep/ .uni-radio-input:hover {
  border-color: #d1d1d1 !important;
}
</style>
